<template>
	<view class="mescrollBody">
		<mescroll-body
			ref="mescrollRef"
			@init="mescrollInit" 
			@down="downCallback" 
			@up="upCallback"
			height="100%" 
			:down="downOption"
			:top="mescrollTop"
			:up="upOption">
			<view class="content">
				{{text}}
			</view>
			<view class="content" @click="toMescrollSwiper">
				Tab列表
			</view>
			<view class="content" @click="toMescrollSwiperRefresh">
				Tab列表-第一次不下拉刷新
			</view>
			<view class="content" @click="toSticky">
				吸顶
			</view>
		</mescroll-body>	
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default{
		mixins: [MescrollMixin], // 使用mixin
		data(){
			return{
				mescrollTop: 0,
				// 下拉刷新操作的时间，用于延迟下拉刷新
				downBeginTime: 0,
				// 下拉刷新的常用配置
				downOption: {
					use: true, // 是否启用下拉刷新; 默认true
					auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
				},
				// 上拉加载的常用配置
				upOption: {
					use: false, // 是否启用上拉加载; 默认true
					toTop:{
						bottom: '20upx'
					}
				},
				text:"下拉进行刷新数据"
			}
		},
		methods:{
			// 下拉刷新的回调
			downCallback(){
				// this.downBeginTime = new Date().getTime();
				this.list()
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				// console.log(page)
			},
			// 数据列表
			list(){
				this.text = "数据被刷新了"
				setTimeout(()=>{
					this.mescroll.endSuccess(1);
				},1000)
			},
			toMescrollSwiper(){
				uni.navigateTo({
					url:'/pages/componentsA/mescroll/mescrollSwiper/mescrollSwiper-tab'
				})
			},
			toMescrollSwiperRefresh(){
				uni.navigateTo({
					url:'/pages/componentsA/mescroll/mescrollSwiper-refresh/mescrollSwiper-tab'
				})
			},
			toSticky(){
				uni.navigateTo({
					url:'/pages/componentsA/mescroll/sticky/sticky'
				})
			} 
			
		}
	}
</script>

<style>
	page{
		background: #F5F5F5;
		font-size: 30rpx;
	}
	.content{
		width: 600rpx;
		height: 70rpx;
		margin: auto;
		background: pink;
		color: #FFFFFF;
		line-height: 70rpx;
		text-align: center;
		border-radius: 10rpx;
		margin-top: 20rpx;
	}
	
</style>
